<template>
  <div class="container">
    <ul class="starlist clearfix">
      <li class="eva-item clearfix">
        <div class="left">
          管家评价
        </div>
        <div class="right">
          <img :src="steward_score>=1?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_steward(1)">
          <img :src="steward_score>=2?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_steward(2)">
          <img :src="steward_score>=3?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_steward(3)">
          <img :src="steward_score>=4?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_steward(4)">
          <img :src="steward_score>=5?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_steward(5)">
        </div>
      </li>
      <li class="eva-item clearfix">
        <div class="left">
          咨询师评价
        </div>
        <div class="right">
          <img :src="doctor_score>=1?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_doctor(1)">
          <img :src="doctor_score>=2?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_doctor(2)">
          <img :src="doctor_score>=3?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_doctor(3)">
          <img :src="doctor_score>=4?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_doctor(4)">
          <img :src="doctor_score>=5?'https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
               alt=""
               class="little_star"
               @tap="changescore_doctor(5)">
        </div>
      </li>
    </ul>
    <div class="sub-btn"
         @tap="sub_eva()">
      提交评价
    </div>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      steward_score: 5,
      doctor_score: 5,
      booking_id: ""
    };
  },
  methods: {
    changescore_steward (score) {
      this.steward_score = score;
    },
    changescore_doctor (score) {
      this.doctor_score = score;
    },
    sub_eva () {
      wx.showLoading({
        title: "提交中...", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/v4_5/order_project/appoint_comment", {
        id: this.booking_id,
        steward_star: this.steward_score,
        counselor_star: this.doctor_score
      }, result => {
        wx.hideLoading();
        let res = result.data;
        if (res.status_code == 0) {
          wx.showToast({
            title: "评论成功", //提示的内容,
            icon: "success", //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              wx.navigateBack({
                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
              });
            }
          });
        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: false
          });
        }
      })
    }
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "评价"
    });
    Object.assign(this.$data, this.$options.data());
    if (options.id) {
      this.booking_id = options.id;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  background: rgba(243, 244, 246, 1);
  .starlist {
    width: 100%;
    height: 85px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1px 0px 0px rgba(204, 204, 204, 0.5);
    .eva-item {
      padding: 0 15px;
      box-sizing: border-box;
      line-height: 20px;
      margin-top: 15px;
      .left {
        float: left;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
      .right {
        height: 100%;
        float: right;
        .little_star {
          width: 20px;
          height: 20px;
          display: block;
          float: left;
          margin-right: 10px;
        }
      }
    }
  }
  .sub-btn {
    width: 100%;
    height: 50px;
    background: rgba(246, 70, 101, 1);
    font-size: 17px;
    font-family: "Medium";
    font-weight: 500;
    line-height: 50px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>



